<!DOCTYPE html>
<html class="wide wow-animation" lang="en">
<head>
	<title>Home</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<link rel="stylesheet" type="text/css" href="__ADDON__/css/6ecc2c8d8e95408da4b43dc84e75013c.css">
	<link rel="stylesheet" href="__ADDON__/css/bootstrap.css">
	<link rel="stylesheet" href="__ADDON__/css/fonts.css">
	<link rel="stylesheet" href="__ADDON__/css/style.css">
	<!-- CSS -->
	<link href='__ADDON__/css/styles.css' rel='stylesheet'>
	<!-- JS -->
	<script src='__ADDON__/js/intense.js'></script>
	<style>.ie-panel {
        display: none;
        background: #212121;
        padding: 10px 0;
        box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, .3);
        clear: both;
        text-align: center;
        position: relative;
        z-index: 1;
    }

    html.ie-10 .ie-panel, html.lt-ie-10 .ie-panel {
        display: block;
    }</style>
</head>
<body>
<div class="ie-panel"><a href="http://windows.microsoft.com/en-US/internet-explorer/"><img
		src="__ADDON__/picture/warning_bar_0000_us.jpg" height="42" width="820"
		alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today."></a>
</div>
<div class="preloader">
	<div class="preloader-body">
		<div class="loader">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
		<p>Loading...</p>
	</div>
</div>
<div class="page">
	<!--Swiper-->
	<section class="section swiper-container swiper-slider swiper-slider-1 context-dark" data-loop="true"
			 data-autoplay="5000" data-simulate-touch="false">
		<div class="swiper-wrapper">
			<div class="swiper-slide" data-slide-bg="__ADDON__/images/dz1.jpg">
				<div class="swiper-slide-caption section-lg">
					<div class="container">
						<div class="row">
							<div class="col-md-9 col-lg-7 offset-md-1 offset-xxl-0">
								<h1><span class="d-block" data-caption-animate="fadeInUp"
										  data-caption-delay="100">腾讯地图</span><span class="d-block text-light"
																					data-caption-animate="fadeInUp"
																					data-caption-delay="200">& 电子围栏</span>
								</h1>
								<p class="lead" data-caption-animate="fadeInUp" data-caption-delay="350">
									助力行业地图动态场景灵活调控实施范围</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="swiper-slide" data-slide-bg="__ADDON__/images/dz2.jpg">
				<div class="swiper-slide-caption section-lg">
					<div class="container">
						<div class="row">
							<div class="col-md-9 col-lg-7 offset-md-1 offset-xxl-0">
								<h1><span class="d-block" data-caption-animate="fadeInUp"
										  data-caption-delay="100">精准圈地</span><span class="d-block text-light"
																					data-caption-animate="fadeInUp"
																					data-caption-delay="200">提高效率</span>
								</h1>
								<p class="lead" data-caption-animate="fadeInUp" data-caption-delay="350">
									让还车找车更加可靠，商家不吃亏，客户不白跑</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="swiper-slide" data-slide-bg="__ADDON__/images/dz3.jpg">
				<div class="swiper-slide-caption section-lg">
					<div class="container">
						<div class="row">
							<div class="col-md-9 col-lg-7 offset-md-1 offset-xxl-0">
								<h1>
									<span class="d-block" data-caption-animate="fadeInUp" data-caption-delay="100">应用场景多样化</span>
									<span class="d-block text-light" data-caption-animate="fadeInUp"
										  data-caption-delay="200">赋能电商、线下实体、比赛围栏、范围打卡等</span>
								</h1>
								<p class="lead" data-caption-animate="fadeInUp" data-caption-delay="350"></p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--Swiper Pagination-->
		<div class="swiper-pagination-wrap">
			<div class="container">
				<div class="row">
					<div class="col-md-9 col-lg-7 offset-md-1 offset-xxl-0">
						<div class="swiper-pagination"></div>
					</div>
				</div>
			</div>
		</div>
	</section>
	<!--Icon List 2-->
	<section class="section section-sm section-sm-bottom-100 bg-primary">
		<div class="container">
			<div class="row row-30">
				<div class="col-md-4 wow fadeInUp">
					<div class="box-icon-2">
						<div class="icon novi-icon mercury-icon-calc"></div>
						<h5 class="title">餐饮行业</h5>
						<p class="text">点餐外卖，范围配送，商家在后台灵活设定电子围栏</p>
					</div>
				</div>
				<div class="col-md-4 wow fadeInUp" data-wow-delay="0.2s">
					<div class="box-icon-2">
						<div class="icon novi-icon mercury-icon-chart"></div>
						<h5 class="title">单车租借</h5>
						<p class="text">单车汽车借车还车服务，老板圈定好围栏，让损失跟维护成本降到最低</p>
					</div>
				</div>
				<div class="col-md-4 wow fadeInUp" data-wow-delay="0.4s">
					<div class="box-icon-2">
						<div class="icon novi-icon mercury-icon-time-sand"></div>
						<h5 class="title">办公打卡</h5>
						<p class="text">精准围栏，只要你拿手机的手伸进了这个隐形的电子围栏，你就可以上班打卡。</p>
					</div>
				</div>
			</div>
		</div>
	</section>
	<!-- Monthly Market-->
	<section class="section section-sm bg-default">
		<div class="container">
			<div class="row row-30 justify-content-xl-between align-items-md-center">
				<h3>绘制电子围栏</h3>
				<iframe src="{:addon_url('tcfence/index/map1')}" style="width:100%;height:500px"></iframe>
			</div>
		</div>
	</section>
	
	<section class="section section-sm bg-default">
		<div class="container">
			<div class="row row-30 justify-content-xl-between align-items-md-center">
				<h3>编辑电子围栏</h3>
				<iframe src="{:addon_url('tcfence/index/map2')}" style="width:100%;height:750px"></iframe>
			</div>
		</div>
	</section>
	<!--Blockquote-->
	<section class="section bg-gray-100 box-image-left">
		<div class="container">
			<div class="row">
				<div class="col-md-6">
					<div class="section-md section-md-bottom-50">
						<h2 class="title-icon"><span class="icon icon-default mercury-icon-speak"></span><span>电子围栏配置注意事项</span>
						</h2>
						<!-- Owl Carousel-->
						<div class="owl-carousel owl-carousel-1" data-items="1" data-dots="true" data-nav="false"
							 data-stage-padding="0" data-loop="true" data-margin="30" data-mouse-drag="false">
							<blockquote class="quote quote-simple">
								<q>创建应用=>启用产品按需选择(此处选择WebServiceApi)=>授权IP=>输入框留可选择空=>保存即可（如右图所示）</q>
								<div class="quote-meta">
									<div class="author">
										<cite>获取Key</cite>
									</div>
									<div class="position">在应用列表即可获取key值</div>
								</div>
							</blockquote>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="box-image-item novi-background bg-image demo-image"
			 data-image="__ADDON__/images/typography-1-946x485.jpg"
			 style="background-image: url(__ADDON__/images/typography-1-946x485.jpg)"></div>
	</section>
	<!-- Latest Articles-->
	<section class="section bg-default section-md">
		<div class="container">
			<h2 class="title-icon"><span class="icon icon-default mercury-icon-news"></span><span>后台截图</span></h2>
			
			<div class="box-image-small box-image-small-left">
				<div class="item-image bg-image novi-nackground demo-image" data-image="__ADDON__/images/d1.png"
					 style="background-image: url(__ADDON__/images/d1.png)"></div>
				<div class="item-body wow fadeInRight">
					<h4><a href="#">配置腾讯地图电子围栏参数</a></h4>
					<p class="big">缩放级别可以暂定16，默认经纬度选定项目所在城市经纬度即可（<a href="https://lbs.qq.com/getPoint/" target="_blank">经纬度获取器</a>）,key值是关键，不填写项目没法进行下去
					</p>
				</div>
			</div>
			
			<div class="box-image-small box-image-small-right">
				<div class="item-image bg-image novi-nackground  demo-image" data-image="__ADDON__/images/d2.png"
					 style="background-image: url(__ADDON__/images/d2.png)"></div>
				<div class="item-body wow fadeInLeft">
					<h4><a href="#">未填写Key值则如右图所示</a></h4>
					<p class="big">如果已经填写了还出现右图的情况，建议点击后台右上方菜单栏的清楚缓存，然后刷新界面就没有问题</p>
				</div>
			</div>
			
			<div class="box-image-small box-image-small-left">
				<div class="item-image bg-image novi-nackground  demo-image" data-image="__ADDON__/images/d3.png"
					 style="background-image: url(__ADDON__/images/d3.png)"></div>
				<div class="item-body wow fadeInRight">
					<h4><a href="#">给指定区域添加电子围栏</a></h4>
					<p class="big">区域是事先创建好的，相当于一个围栏大分类</p>
				</div>
			</div>
			
			<div class="box-image-small box-image-small-right ">
				<div class="item-image bg-image novi-nackground  demo-image" data-image="__ADDON__/images/d4.png"
					 style="background-image: url(__ADDON__/images/d4.png)"></div>
				<div class="item-body wow fadeInLeft">
					<h4><a href="#">添加电子围栏操作</a></h4>
					<p class="big">地图上显示的中心点为配置的中心点，如果想找到指定的地区进行电子围栏配置，可在地图左下角先进行地区搜索，然后操作。电子围栏双击为自动连接首尾坐标点行程闭合围栏</p>
				</div>
			</div>
			
			<div class="box-image-small box-image-small-left">
				<div class="item-image bg-image novi-nackground  demo-image" data-image="__ADDON__/images/d5.png"
					 style="background-image: url(__ADDON__/images/d5.png)"></div>
				<div class="item-body wow fadeInRight">
					<h4><a href="#">围栏添加成功</a></h4>
					<p class="big">添加成功的围栏会自动返回到上一页，并且直接预览，边际上电子围栏备注名称即可添加完成</p>
				</div>
			</div>
			
			<div class="box-image-small box-image-small-right">
				<div class="item-image bg-image novi-nackground  demo-image" data-image="__ADDON__/images/d6.png"
					 style="background-image: url(__ADDON__/images/d6.png)"></div>
				<div class="item-body wow fadeInLeft">
					<h4><a href="#">编辑电子围栏</a></h4>
					<p class="big">可以对电子围栏进行编辑，拖拽实现新的围栏目标，保存即可</p>
				</div>
			</div>
			
			<div style="margin-top:50px">
				<h3 style="float:left">
					<span>常见问题：</span>
				</h3>
				<br>
				<div style="text-align: left;margin-top:50px ">
					
					<div>问：为什么一次只能圈一个电子围栏？</div>
					<div>答：因为在编辑电子围栏的时候，围栏编号会变化，没办法对标是哪个围栏在变化，不能精确更新数据库围栏。问题可以解决，还需升级迭代。</div>
					
					
					<br>
					<div>问：怎么判断经纬度是否在围栏内部？</div>
					<div>答：<a href="https://www.cnblogs.com/CanyingV/p/14016458.html"
							  target="_blank">传送门</a>
					</div>
				</div>
			
			</div>
		</div>
	</section>
	<!-- Subscribe form-->
	
	<footer class="section footer-classic">
		<div class="footer-inner-2">
			<div class="container">
				<p class="rights"><span>由</span><span>&nbsp;</span><span>&nbsp; </span><span></span><a
						href="https://www.fastadmin.net/" target="_blank">Fastadmin框架</a>驱动
				</p>
			</div>
		</div>
	</footer>
</div>
<div class="snackbars" id="form-output-global"></div>
<script src="__ADDON__/js/core.min.js"></script>
<script src="__ADDON__/js/script.js"></script>
<script type="text/javascript">
    window.onload = function () {
        var elements = document.querySelectorAll('.demo-image');
        Intense(elements);
    }
</script>
</body>
</html>